<template>
  <div class="app-container">
    <el-form :inline="true" ref="blackForm" :model="formInline" class="demo-form-inline">
      <el-form-item label="触发群组" prop="level">
        <el-select v-model="formInline.level" multiple :collapse-tags="true" @change="ischange=false;">
          <el-option
            v-for="item in triggerGroup"
            :label="item.levelName"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号" class="with-pre-select" prop="username" @keyup.enter.native="handleSearch">
        <el-input placeholder="请输入账号" v-model="formInline.username" class="input-with-select"/>
      </el-form-item>
      <el-form-item label="IP" prop="blackIp">
        <el-input placeholder="请输入IP" v-model="formInline.blackIp" class="input-with-select" @keyup.enter.native="handleSearch"/>
      </el-form-item>
      <el-form-item label="设备号" prop="blackIp">
        <el-input placeholder="请输入设备号" v-model="formInline.deviceId" class="input-with-select" @keyup.enter.native="handleSearch" />
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankCard">
        <el-input placeholder="请输入银行卡号" v-model="formInline.bankCard" class="input-with-select" @keyup.enter.native="handleSearch" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input placeholder="请输入手机号" v-model="formInline.mobile" class="input-with-select" @keyup.enter.native="handleSearch" />
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input placeholder="请输入姓名" v-model="formInline.realName" class="input-with-select" @keyup.enter.native="handleSearch" />
      </el-form-item>
      <el-form-item label="会员层级" prop="userLevelId">
        <el-select v-model="formInline.userLevelId" placeholder="请选择会员层级">
          <el-option
            :label="'全部'"
            :key="consts.ALL"
            :value="consts.ALL"
          ></el-option>
          <el-option
            v-for="item in userLevelList"
            :key="item.levelId"
            :label="item.name"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行为时间" prop="time">
        <el-date-picker
          v-model="formInline.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="行为" prop="behavior">
        <el-select v-model="formInline.behavior" placeholder="请选择行为" multiple :collapse-tags="true">
          <el-option
            v-for="item in consts.BLACK_LIST_BEHAVIOR"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单号" prop="orderId">
        <el-input placeholder="请输入单号" v-model="formInline.orderId" class="input-with-select" @keyup.enter.native="handleSearch"/>
      </el-form-item>
      <el-form-item label="是否已读" prop="readed">
        <el-select v-model="formInline.readed" placeholder="请选择是否已读">
          <el-option
            :label="'全部'"
            :key="consts.ALL"
            :value="consts.ALL"
          ></el-option>
          <el-option
            v-for="item in consts.BLACK_LIST_READ"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索
      </el-button>
      <el-button @click="selfResetForm('blackForm')">重置</el-button>
    </el-form>
  </div>
</template>

<script>
import { form, grid, pickerOption } from '@/build';
import { getAgencyAuditorList } from '@/services/api/agency';
import { risBlackListBehaviorLevelApi } from '@/services/api/risk';
import { getUserLevelList } from '@/services/api/userLevel';

export default {
  name: 'form-filter',
  mixins: [form, grid, pickerOption],
  props: {
    triggerGroup: {
      type: Array,
      default: () => [],
    },
    userLevelList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      ischange: true,
      formInline: {
        deviceId: '',
        username: '',
        level: [],
        deviceNumber: '',
        blackIp: '',
        bankCard: '',
        mobile: '',
        realName: '',
        userLevelId: -1,
        orderId: '',
        readed: -1,
        behavior: [0, 1, 2, 3, 4],
        time: [
          moment().format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD 23:59:59'),
        ],
        page: 1,
        size: 20,
      },
    };
  },
  methods: {
    selfResetForm(formName) {
      this.resetForm(formName);
      this.triggerGroup.forEach((item) => {
        this.formInline.level.push(item.levelId);
      });
      this.$emit('on-filter', this.formInline);
    },
    handleSearch() {
      this.$emit('on-filter', this.filters);
    },
  },
  watch: {
    triggerGroup(val) {
      if (val.length > 0) {
        this.formInline.level = [];
        val.forEach((item) => {
          this.formInline.level.push(item.levelId);
        });
      }
    },
  },
  computed: {
    filters() {
      if (this.formInline.level.length === 0 && this.ischange) {
        const list = [];
        _.each(this.triggerGroup, (item) => {
          list.push(item.levelId);
        });
        return { ...this.formInline, level: list };
      }
      return { ...this.formInline };
    },
  },
  mounted() {
    this.bindGet(getAgencyAuditorList, 'auditorList', {
      action: 'getGrid',
      sendingData: 'filters',
    });

    // 获取触发群组
    // this.bindGet(risBlackListBehaviorLevelApi, 'levelList', {
    //   action: 'getLevelList',
    //   afterSuccess: ([result, data]) => {
    //     const self = this;
    //     if (data) {
    //       _.forEach(data, (item) => {
    //         self.formInline.level.push(item.levelId);
    //       });
    //     }
    //   },
    // });
    // 获取会员层级列表
    // this.bindGet(getUserLevelList, 'userLevelList', {});
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 160px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
